<template>
  <div class="mobile-dashboard" :class="prefixCls">
    <!-- 页面标题 -->
    <div class="dashboard-header">
      <h1 class="header-title">{{ t('移动工作台') }}</h1>
    </div>
    
    <!-- 菜单列表，添加响应式布局 -->
    <div class="menu-container">
      <a-list 
        :grid="gridConfig" 
        :data-source="menus"
        class="menu-list"
      >
        <template #renderItem="{ item }">
          <a-list-item class="menu-item">
            <a-card 
              :title="item.name" 
              class="menu-card"
              @click="handleMenuClick(item)"
            >
              <!-- 添加图标 -->
              <div class="card-icon">
                <Icon :icon="item.icon" />
              </div>
              <!-- 菜单项描述 -->
              <div class="card-remark">{{ item.remark }}</div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { router } from '/@/router';

export default defineComponent({
  name: "MobileDashboard",
  components: {
    Icon,
  },
  setup(props) {
    const { prefixCls } = useDesign('mobile-dashboard');
    const { t } = useI18n();
    
    // 菜单项数据
    const menus = ref([
      {
        path: '/mobile/retail/out',
        name: t('零售出库'),
        remark: t('用于零售出库管理'),
        img: '',
        icon: 'akar-icons:airplay-video'
      },
      {
        path: '/mobile/take/sheet',
        name: t('盘点单管理'),
        remark: t('用于盘点单管理'),
        img: '',
        icon: 'mdi:account-box-edit-outline'
      },
      {
        path: '/mobile/retail/statistics',
        name: t('零售出库统计'),
        remark: t('用于零售出库数据统计'),
        img: '',
        icon: 'mdi:chart-line'
      },
      // 可以根据需要添加更多菜单项
    ]);
    
    // 响应式网格配置
    const gridConfig = computed(() => ({
      gutter: 12, // 间距
      column: 2,  // 默认两列
    }));
    
    // 处理菜单项点击
    const handleMenuClick = (item) => {
      router.push(item.path).catch((err) => {
        // 捕获路由跳转时的错误，避免未处理的 Promise 异常
        console.error('路由跳转出错:', err);
      });
    };
    
    return { menus, prefixCls, t, gridConfig, handleMenuClick };
  }
});
</script>

<style lang="less" scoped>
// 基础样式
.mobile-dashboard {
  width: 100%;
  min-height: 100vh;
  padding: 16px;
  box-sizing: border-box;
  background-color: #f5f5f5;
  
  // 页面头部
  .dashboard-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
    
    .header-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      color: #333;
    }
  }
  
  // 菜单容器
  .menu-container {
    width: 100%;
  }
  
  // 菜单项
  .menu-list {
    width: 100%;
    
    .menu-item {
      padding: 0;
    }
    
    // 菜单卡片样式
    .menu-card {
      height: 100%;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 8px;
      border: 1px solid #e8e8e8;
      
      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }
      
      // 卡片图标
      .card-icon {
        font-size: 32px;
        margin-bottom: 8px;
        color: #1890ff;
      }
      
      // 卡片标题
      &-head {
        margin-bottom: 8px;
        
        &-title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
        }
      }
      
      // 卡片描述
      .card-remark {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        margin-top: 4px;
      }
    }
  }
}

// 响应式设计，适配不同尺寸的手机
@media screen and (max-width: 375px) {
  .mobile-dashboard {
    padding: 12px;
    
    .dashboard-header {
      .header-title {
        font-size: 18px;
      }
    }
    
    .menu-card {
      min-height: 100px;
      padding: 12px;
      
      .card-icon {
        font-size: 28px;
      }
      
      &-head-title {
        font-size: 14px;
      }
      
      .card-remark {
        font-size: 11px;
      }
    }
  }
}

// 针对小屏幕手机的单列布局
@media screen and (max-width: 320px) {
  .mobile-dashboard {
    .menu-list {
      .ant-list-grid {
        grid-template-columns: repeat(1, 1fr) !important;
      }
    }
  }
}
</style>